Summary

Adds Therapy Compass — a source-grounded therapy decision-support mockup — as a dev-only route at /mockups/therapy-compass, adapted from the claude.ai/design "Therapy page mockups" project (Therapy Compass.dc.html).

Eight screens with full client-side wiring:

• Home – search hero, quick tools, key pathways, frequently-used therapies
• Search – result cards (why-matched / avoid-modify / best-fit) + clinical workbench
• Detail – therapy record (hero, quick tiles, body sections, right rail, source provenance)
• Compare – 3-way comparison grid with Priorities/Differences/All tabs + comfortable/dense density toggle
• Recommend – constraint builder + ranked clinical matches
• Pathways – problem-based workflow with linked therapy steps
• Brief Intervention – 5-min / 15-min / grounding tabs, delivery steps, pre-use checklist
• Patient Sheet – live builder (tone, section toggles, clinician footer) with a printable "paper" preview + Print/PDF
• Review Queue – placeholder surface (shared isOther fallback)

Fitted to the app's chrome, not ported verbatim. The content renders inside the app's universal chrome — global header + sidebar (via the mockups layout) and the shared clinical verification footer (ModeHomeVerificationFooter). The design's own left sidebar was intentionally dropped (that role is already filled by the universal rail); its eight destinations are reached through a horizontal, repo-idiomatic pill nav that sits under the global header and scrolls on narrow viewports. The shared bottom search composer is hidden (as with the tools/favourites mockups) since the tool provides its own search surface.

Implementation note: the screens keep the design export's token-based inline styles. Every var(--…) token already exists in globals.css and flips in dark mode; a small s() helper parses the CSS strings at render so the markup stays close to the design (and off the Tailwind type/icon-scale gates, which only flag arbitrary utilities). Two hardcoded body-text colours were mapped to --warning-text / --info-text for dark-mode correctness; the patient-sheet "paper" keeps its intentional print colours. Design-nav anchors were promoted to accessible <button>s and layout-only <label>s to <div>s with aria-labeled inputs.

Verification

Dev-only mockup (production returns 404, robots disallows indexing). Ran:

• ✅ npm run lint (clean, --max-warnings 0), Prettier --check (clean), sitemap:check (route registered)

• ✅ typecheck — clean for every new file (the only tsc errors in this sandbox are pre-existing and come from optional deps not installed here: @sentry/node, @testing-library/*, @axe-core/playwright)

• ✅ Browser QA via Chromium/Playwright — all 8 screens + placeholder, light and dark, verified rendering inside the universal chrome; screen navigation, comparison tabs, density, brief tabs, sheet section/tone toggles and the clinician toggle all confirmed working, no React console warnings

• npm run verify:pr-local — not run to completion in this sandbox (its typecheck step trips on the missing optional deps above, unrelated to this change); the individual gates above were run directly. CI Build / Static PR checks cover these with a full install.

• npm run verify:ui — full Chromium e2e suite not run locally; equivalent manual browser QA performed instead (CI Critical UI smoke / UI regression cover it).

Clinical Governance Preflight

N/A — this is a static, dev-only design mockup. It does not touch ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, Supabase, or clinical output. All copy is placeholder design content; no real or patient-identifiable data, no service-role/provider access, and no schema changes.

Notes

Two commits: (1) the initial port of the eight screens; (2) a refactor that drops the design's own sidebar for the horizontal in-content nav so the tool fits the app's universal chrome. Screens were converted from the design export's x-dc template (inline-styled HTML + a small state script) into React with a context (TcProvider / useTcBindings) that mirrors the export's renderVals() state — screen routing, comparison tabs, density, brief tabs, patient-sheet tone/sections, clinician toggle and print.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K

Summary by CodeRabbit

• New Features

  • Added the Therapy Compass clinical tool prototype.
  • Added therapy search, recommendations, comparisons, clinical pathways, briefs, therapy details, and patient sheet creation.
  • Added customizable patient handouts with editable sections, tone options, and print/PDF support.
  • Added responsive navigation and clinical verification information across screens.

• Documentation

  • Added the Therapy Compass route to the site map.